<template>
  <ul class="myMenu">
    <li v-for="(item, index) in childrenMenu" :key="index">
      <p @click="show = !show">{{ item.title }} <span v-if="item.children">></span></p>
      <transition>
        <ol v-if="show" :style="{height: (item.children?.length*50)+ 'px' }">
          <li v-for="(n, i) in item.children" :key="i">
            <p>{{ n.title }}</p>
          </li>
        </ol>
      </transition>
    </li>
  </ul>
</template>
<script>
import { ref } from "vue";
export default {
  props: {
    childrenMenu: Array,
  },
  setup(props) {
    const show = ref(true);
    return {
      show,
    };
  },
};
</script>

<style lang="scss" scoped>
.myMenu {
  width: 160px;
  background: #5f5f5f;
  height: 100%;
  color: #fff;
  li {
    padding: 0 15px;
  }
  p {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  ol {
    overflow: hidden;
  }
  .v-enter-active,
  .v-leave-active {
    transition: all 0.3s ease-out;
  }
  .v-enter-from,
  .v-leave-to {
    height: 0!important;
    overflow: hidden;
  }
}
</style>
